<template>
    <div class="main_right_hot">
        <div class="main_right_hot_title">热门推荐</div>
        <div v-for="item in articleList" :key="item.id">
            <div class="main_right_hot_item">
                <div>
                    <router-link target="_blank" :to="{
            path: '/articleDetails',
            query: {
              articleId:item.id
            }
          }">
                        <div class="main_right_hot_item_title">{{ item.title }}</div>
                    </router-link>
                </div>
                <div class="main_right_hot_item_two">
                    <div class="main_right_hot_item_nickname">{{ item.user.nickname }}</div>
                    <img class="main_right_hot_item_views_img" src="@/assets/img/article/浏览.png" alt="浏览">
                    <div class="main_right_hot_item_views">{{ item.views }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {userArticleRecommend} from "@/api/home/article";
// @ts-ignore
import cookie from 'js-cookie'
import {Article} from "@/model/home/article";

//文章推荐列表
const articleList = ref<Article[]>([])

//用户id
const userId = ref<number>(0)

//获取用户文章推荐
const handleUserArticleRecommend = async () => {
    const res = await userArticleRecommend(userId.value)
    articleList.value = res.data.data.list
}

//从cookie中获取用户id
const getUserId = () => {
    if (cookie.get('userinfo') != null) {
        userId.value = JSON.parse(cookie.get('userinfo')).id
    } else {
        userId.value = 0
    }
}

getUserId()
handleUserArticleRecommend()
</script>

<style lang="less" scoped>
.main_right_hot {
  background-color: #ffffff;
  padding: 3px 3px 10px;

  .main_right_hot_title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
  }

  .main_right_hot_item {

    .main_right_hot_item_title {
      padding: 5px;
      font-size: 18px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 80%;
    }

    .main_right_hot_item_title:hover {
      color: red;
    }

    .main_right_hot_item_two {
      display: flex;
      padding: 5px;
      border-bottom: 1px solid #f0f0f0;

      .main_right_hot_item_nickname {
      }

      .main_right_hot_item_views_img {
        width: 20px;
        height: 20px;
        margin-left: 20px;
      }

      .main_right_hot_item_views {
        margin-left: 5px;
      }
    }
  }
}
</style>